import React from 'react';
import { View } from '@tarojs/components';
import { Button } from './button';
import './NumberPad.scss';

interface NumberPadProps {
  /** 输入回调函数 */
  onInput: (value: string) => void;
}

/**
 * 数字键盘组件 - 适配 Taro 多端框架
 * 4x4 布局，确认键占右侧 3 格高度
 */
const NumberPad: React.FC<NumberPadProps> = ({ onInput }) => {
  return (
    <View className="number-pad">
      <View className="number-pad__grid">
        {/* 左侧 3x4 数字区域 */}
        <View className="number-pad__left">
          <View className="number-pad__row">
            <Button onClick={() => onInput('1')} variant="outline" className="number-pad__button">1</Button>
            <Button onClick={() => onInput('2')} variant="outline" className="number-pad__button">2</Button>
            <Button onClick={() => onInput('3')} variant="outline" className="number-pad__button">3</Button>
          </View>
          <View className="number-pad__row">
            <Button onClick={() => onInput('4')} variant="outline" className="number-pad__button">4</Button>
            <Button onClick={() => onInput('5')} variant="outline" className="number-pad__button">5</Button>
            <Button onClick={() => onInput('6')} variant="outline" className="number-pad__button">6</Button>
          </View>
          <View className="number-pad__row">
            <Button onClick={() => onInput('7')} variant="outline" className="number-pad__button">7</Button>
            <Button onClick={() => onInput('8')} variant="outline" className="number-pad__button">8</Button>
            <Button onClick={() => onInput('9')} variant="outline" className="number-pad__button">9</Button>
          </View>
          <View className="number-pad__row">
            <Button onClick={() => onInput('.')} variant="outline" className="number-pad__button">.</Button>
            <Button onClick={() => onInput('0')} variant="outline" className="number-pad__button">0</Button>
            <Button onClick={() => onInput('clear')} variant="outline" className="number-pad__button">C</Button>
          </View>
        </View>

        {/* 右侧操作区域 */}
        <View className="number-pad__right">
          {/* 删除键 */}
          <Button 
            onClick={() => onInput('backspace')} 
            variant="outline" 
            className="number-pad__delete-button"
          >
            ⌫
          </Button>
          
          {/* 确认键（占 3 格高度）*/}
          <Button 
            onClick={() => onInput('ok')} 
            variant="default" 
            className="number-pad__ok-button"
          >
            确认
          </Button>
        </View>
      </View>
    </View>
  );
};

export default NumberPad;
